<template>
  <div class="diy-page">
    <div class="product_tabs">
      <div slot="title">
        <div style="float: left;">
          <el-button icon="el-icon-arrow-left" type="text" size="small" @click="goBack">返回</el-button>
        </div>
        <div>
          <el-button class="bnt" type="primary" @click="saveConfig" :loading="loading">保存</el-button>
          <el-button class="bnt ml20" @click="reast">重置</el-button>
        </div>
      </div>
    </div>
    <el-card :bordered="false">
      <div class="diy-wrapper" :style="'height:' + clientHeight + 'px;'">
        <!-- 左侧 -->
        <div class="left">
          <div class="title-bar">
            <div class="title-item" :class="{ on: tabCur == index }" v-for="(item, index) in tabList" :key="index"
              @click="bindTab(index)">
              {{ item.title }}
            </div>
          </div>
          <div class="wrapper" :style="'height:' + (clientHeight - 46) + 'px;'" v-if="tabCur == 0">
            <div v-for="(item, index) in leftMenu" :key="index">
              <div class="tips" @click="item.isOpen = !item.isOpen">
                {{ item.title }}

                <i class="el-icon-arrow-right" size="16" v-if="!item.isOpen"></i>
                <i class="el-icon-arrow-down" size="16" v-else></i>
              </div>
              <draggable class="dragArea list-group" :list="item.list"
                :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog" dragClass="dragClass"
                filter=".search , .navbar">
                <div class="list-group-item" :class="{ search: element.cname == '搜索框', navbar: element.cname == '商品分类' }"
                  v-for="(element, index) in item.list" :key="element.id" @click="addDom(element, 1)"
                  v-show="item.isOpen">
                  <div>
                    <div class="position" style="display: none">释放鼠标将组建添加到此处</div>
                    <span class="conter iconfont-diy" :class="element.icon"></span>
                    <p class="conter">{{ element.cname }}</p>
                  </div>
                </div>
              </draggable>
            </div>
          </div>
          <div class="wrapper" v-else :style="'height:' + (clientHeight - 46) + 'px;'">
            <div class="link-item" v-for="(item, index) in urlList" :key="index">
              <div class="name">{{ item.name }}</div>
              <div class="link-txt">地址：{{ item.url }}</div>
              <div v-if="item.parameter" class="params">
                <span class="txt">参数：</span>
                <span>{{ item.parameter }}</span>
              </div>
              <div v-if="item.example" class="lable">
                <p class="txt">例如：{{ item.example }}</p>
                <el-button size="small" class="copy copy-data" :data-clipboard-text="item.example">复制
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="wrapper-con"
          style="flex:1;background:#f0f2f5;display:flex;justify-content:center;padding-top:20px;height:100%;">
          <div class="content">
            <div class="contxt" style="display:flex;flex-direction:column;overflow:hidden;height:100%;">
              <div class="overflowy">
                <div class="picture"><img src="@/assets/images/electric.png"></div>
                <div class="page-title" :class="{ on: activeIndex == -100 }" @click="showTitle">
                  {{ titleTxt }}
                  <div class="delete-box"></div>
                  <div class="handle"></div>
                </div>
              </div>
              <div class="scrollCon">
                <div style="width: 400px;margin: 0 auto">
                  <!--固定首页-->
                  <div class="store-home" v-if="false">
                    <div class="header">
                      <div class="head-menu">
                        <div class="iconfont-h5 icon-xiangzuo" style="color: #fff;"></div>
                        <div class="iconfont-h5 icon-shouye4" style="color: #fff;"></div>
                      </div>
                      <div class="search"><span class="iconfont-h5 icon-xiazai5"></span>搜索商品</div>
                    </div>
                    <div class="store">
                      <image src="@/assets/images/mer_avatar.png"></image>
                      <div class="text">
                        <div>
                          <span class="font-bg-red">自营</span>
                          <span class="name">店铺名称</span>
                          <span class="iconfont-h5 icon-xiangyou"></span>
                        </div>
                        <div class="score">
                          <div class="star">
                            <div></div>
                          </div>
                          <div>5.0</div>
                        </div>
                      </div>
                      <div class="kefu">
                        <span class="iconfont-h5 icon-kefu3"></span>
                      </div>
                      <div class="care button">
                        <span class="iconfont-h5 icon-guanzhu"></span>
                        关注
                      </div>
                    </div>
                    <div class="nav">
                      <div class="nav-cont">
                        <div class="item active">
                          <div class="cont">精选</div>
                        </div>
                        <div class="item">
                          <div class="cont">新品</div>
                        </div>
                        <div class="item">
                          <div class="cont">活动</div>
                        </div>
                        <div class="item">
                          <div class="cont">领券</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="scroll-box"
                    :class="picTxt && tabValTxt == 2 ? 'fullsize noRepeat' : picTxt && tabValTxt == 1 ? 'repeat ysize' : 'noRepeat ysize'"
                    :style="'background-color:' + (colorTxt ? colorPickerTxt : '') + ';background-image: url(' + (picTxt ? picUrlTxt : '') + ');height:' + rollHeight + 'px;'"
                    ref="imgContainer">
                    <draggable class="dragArea list-group" :list="mConfig" group="people" @change="log" filter=".top"
                      :move="onMove" animation="300">
                      <div class="mConfig-item" :class="{
                        on: activeIndex == key,
                        top: item.name == 'search_box' || item.name == 'nav_bar'
                      }" v-for="(item, key) in mConfig" :key="key" @click.stop="bindconfig(item, key)"
                        :style="colorTxt ? 'background-color:' + colorPickerTxt + ';' : 'background-color:#fff;'">
                        <component :is="item.name" ref="getComponentData" :configData="propsObj" :index="key"
                          :num="item.num"></component>
                        <div class="delete-box">
                          <div class="handleType">
                            <div class="iconfont iconshanchu2" @click.stop="bindDelete(item, key)"></div>
                            <div class="iconfont iconfuzhi" @click.stop="bindAddDom(item, 0, key)"></div>
                            <div class="iconfont iconshangyi" :class="key === 0 ? 'on' : ''"
                              @click.stop="movePage(item, key, 1)"></div>
                            <div class="iconfont iconxiayi" :class="key === mConfig.length - 1 ? 'on' : ''"
                              @click.stop="movePage(item, key, 0)"></div>
                          </div>
                        </div>
                        <div class="handle"></div>
                      </div>
                    </draggable>
                  </div>
                </div>
              </div>
              <div class="footer" v-if="false">
                <div v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === item.value }"
                  class="item">
                  <div :class="['iconfont-h5', item.icon]"></div>
                  <div>{{ item.name }}</div>
                </div>
              </div>
              <div class="overflowy" v-if="merInfo.is_tabbar && pageType != 2">
                <div class="page-foot" @click="showFoot" :class="{ on: activeIndex == -101 }">
                  <footPage></footPage>
                  <div class="delete-box"></div>
                  <div class="handle"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right-box">
          <div class="mConfig-item" style="background-color:#fff;" v-for="(item, key) in rConfig" :key="key">
            <div class="title-bar">{{ item.cname }}</div>
            <component :is="item.configName" @config="config" :activeIndex="activeIndex" :num="item.num" :index="key">
            </component>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script crossorigin="anonymous">
import { diyGetInfo, diySave, getUrl, setDefault, recovery } from '@/api/diy'
import { getBaseInfo } from '@/api/user'
import vuedraggable from 'vuedraggable'
import mPage from '@/components/mobilePage/index.js'
import mConfig from '@/components/mobileConfig/index.js'
import footPage from '@/components/pagesFoot'
import { roterPre } from '@/settings'
import { mapState } from 'vuex'
import html2canvas from 'html2canvas'
import ClipboardJS from 'clipboard'

let idGlobal = 0
export default {
  inject: ['reload'],
  name: 'index.vue',
  components: {
    footPage,
    html2canvas,
    draggable: vuedraggable,
    ...mPage,
    ...mConfig
  },
  filters: {
    filterTxt(val) {
      if (val) {
        return (val = val.substr(0, val.length - 1))
      }
    }
  },
  computed: {
    ...mapState({
      titleTxt: (state) => state.mobildConfig.pageTitle || '首页',
      nameTxt: (state) => state.mobildConfig.pageName || '模板',
      showTxt: (state) => state.mobildConfig.pageShow,
      colorTxt: (state) => state.mobildConfig.pageColor,
      picTxt: (state) => state.mobildConfig.pagePic,
      colorPickerTxt: (state) => state.mobildConfig.pageColorPicker,
      tabValTxt: (state) => state.mobildConfig.pageTabVal,
      picUrlTxt: (state) => state.mobildConfig.pagePicUrl
    })
  },
  data() {
    return {
      merInfo: {},
      roterPre: roterPre,
      clientHeight: '',//页面动态高度
      rollHeight: '',
      leftMenu: [], // 左侧菜单
      lConfig: [], // 左侧组件
      mConfig: [], // 中间组件渲染
      rConfig: [], // 右侧组件配置
      activeConfigName: '',
      propsObj: {}, // 组件传递的数据,
      activeIndex: -100, // 选中的下标
      number: 0,
      pageId: '',
      pageName: '',
      pageType: '',
      category: [],
      tabList: [
        {
          title: '组件库',
          key: 0
        },
        {
          title: '页面链接',
          key: 1
        }
      ],
      tabs: [{
        icon: 'icon-yizhan_o',
        name: '首页',
        value: 1
      },
      {
        icon: 'icon-gouwu_o',
        name: '商品',
        value: 3
      },
      {
        icon: 'icon-yingyongAPP_o',
        name: '分类',
        value: 2
      },
      {
        icon: 'icon-zhuanti',
        name: '专场',
        value: 4
      }
      ],
      tabActive: 1,
      tabCur: 0,
      urlList: [],
      footActive: false,
      loading: false,
      isSearch: false,
      isTab: false,
      isFllow: false
    }
  },
  created() {
    getBaseInfo().then(res => {
      this.merInfo = res.data
    })
    this.getUrlList()
    this.pageId = this.$route.query.id
    this.pageName = this.$route.query.name
    this.pageType = this.$route.query.types
    this.lConfig = this.objToArr(mPage)
  },
  mounted() {
    // this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    let imgList = {
      imgList: [require('@/assets/images/foot-006.png'), require('@/assets/images/foot-005.png')],
      name: '逛逛',
      link: '/pages/order_addcart/order_addcart'
    }
    this.$nextTick(() => {
      // this.$store.commit('mobildConfig/FOOTER', { 'title': '是否自定义', 'name': imgList })
      this.arraySort()
      if (this.pageId != 0) {
        this.getDefaultConfig()
      } else {
        this.showTitle()
      }
      this.clientHeight = `${document.documentElement.clientHeight}` - 65.81//获取浏览器可视区域高度
      let H = `${document.documentElement.clientHeight}` - 180
      this.rollHeight = H > 650 ? 650 : H
      let that = this
      window.onresize = function () {
        that.clientHeight = `${document.documentElement.clientHeight}` - 65.81
        let H = `${document.documentElement.clientHeight}` - 180
        that.rollHeight = H > 650 ? 650 : H
      }
    })
    this.$nextTick(function () {
      const clipboard = new ClipboardJS('.copy-data')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
      })
    })
  },
  methods: {
    leftRemove({ to, from, item, clone, oldIndex, newIndex }) {
      if (this.isSearch && newIndex == 0) {
        if (item._underlying_vm_.name == 'z_wechat_attention') {
          this.isFllow = true
        } else {
          this.$store.commit(
            'mobildConfig/ARRAYREAST',
            this.mConfig[0].num
          )
          this.mConfig.splice(0, 1)
        }
      }
      if (this.isFllow = true && newIndex >= 1) {
        this.$store.commit(
          'mobildConfig/ARRAYREAST',
          this.mConfig[0].num
        )
      }
    },
    onMove(e) {
      if (e.relatedContext.element.name == 'search_box') return false
      if (e.relatedContext.element.name == 'nav_bar') return false
      return true
    },
    // 返回
    goBack() {
      if(this.pageType == 2){
        this.$router.push({ path: `${roterPre}/busines/cardDiy/site_diy` })
      }else{
        this.$router.push({ path: `${roterPre}/busines/cardDiy` })
      }
      // this.$confirm('退出后新编辑的数据将无法保存，是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //     }).then(() => {
      //         this.$router.push({ path: `${roterPre}/devise/diy/list` })
      //     }).catch(() => {
      //         this.$message({
      //             type: 'info',
      //             message: '已取消'
      //         });
      //      });
    },
    // 获取url
    getUrlList() {
      getUrl().then((res) => {
        this.urlList = res.data.list
      })
    },
    // 左侧tab
    bindTab(index) {
      this.tabCur = index
    },
    // 页面标题点击
    showTitle() {
      this.activeIndex = -100
      let obj = {}
      for (var i in mConfig) {
        if (i == 'pageTitle') {
          // this.rConfig = obj
          obj = mConfig[i]
          obj.configName = mConfig[i].name
          obj.cname = '页面设置'
        }
      }
      let abc = obj
      this.rConfig = []
      this.rConfig[0] = JSON.parse(JSON.stringify(obj))
    },
    // 页面底部点击
    showFoot() {
      this.activeIndex = -101
      let obj = {}
      for (var i in mConfig) {
        if (i == 'pageFoot') {
          // this.rConfig = obj
          obj = mConfig[i]
          obj.configName = mConfig[i].name
          obj.cname = '底部菜单'
        }
      }
      let abc = obj
      this.rConfig = []
      this.rConfig[0] = JSON.parse(JSON.stringify(obj))
    },
    // 对象转数组
    objToArr(data) {
      let obj = Object.keys(data)
      let m = obj.map((key) => data[key])
      return m
    },
    log(evt) {
      // 中间拖拽排序
      if (evt.moved) {
        if (evt.moved.element.name == 'search_box') {
          return this.$message.warning('该组件禁止拖拽')
        }
        evt.moved.oldNum = this.mConfig[evt.moved.oldIndex].num
        evt.moved.newNum = this.mConfig[evt.moved.newIndex].num
        evt.moved.status = evt.moved.oldIndex > evt.moved.newIndex
        this.mConfig.forEach((el, index) => {
          el.num = new Date().getTime() * 1000 + index
        })
        evt.moved.list = this.mConfig
        this.rConfig = []
        let item = evt.moved.element
        let tempItem = JSON.parse(JSON.stringify(item))
        this.rConfig.push(tempItem)
        this.activeIndex = evt.moved.newIndex
        this.$store.commit('mobildConfig/SETCONFIGNAME', item.name)
        this.$store.commit('mobildConfig/defaultArraySort', evt.moved)
      }
      // 从左向右拖拽排序
      if (evt.added) {
        let data = evt.added.element
        let obj = {}
        let timestamp = new Date().getTime() * 1000
        data.num = timestamp
        this.activeConfigName = data.name
        let tempItem = JSON.parse(JSON.stringify(data))
        tempItem.id = 'id' + tempItem.num
        this.mConfig[evt.added.newIndex] = tempItem
        this.rConfig = []
        this.rConfig.push(tempItem)
        this.mConfig.forEach((el, index) => {
          el.num = new Date().getTime() * 1000 + index
        })
        evt.added.list = this.mConfig
        this.activeIndex = evt.added.newIndex
        // 保存组件名称
        this.$store.commit('mobildConfig/SETCONFIGNAME', data.name)
        this.$store.commit('mobildConfig/defaultArraySort', evt.added)
      }
    },
    cloneDog(data) {
      return {
        ...data
      }
    },
    //数组元素互换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    //点击上下移动；
    movePage(item, index, type) {
      if (type) {
        if (index == 0) {
          return
        }
      } else {
        if (index == this.mConfig.length - 1) {
          return
        }
      }
      if (item.name == 'search_box' || item.name == 'nav_bar') {
        return this.$message.warning('该组件禁止移动')
      }
      if (type) {
        if (this.mConfig[index - 1].name == 'search_box' || this.mConfig[index - 1].name == 'nav_bar') {
          return this.$message.warning('搜索框或分类必须为顶部')
        }
        this.swapArray(this.mConfig, index - 1, index)
      } else {
        this.swapArray(this.mConfig, index, index + 1)
      }
      let obj = {}
      this.rConfig = []
      obj.oldIndex = index
      if (type) {
        obj.newIndex = index - 1
      } else {
        obj.newIndex = index + 1
      }
      this.mConfig.forEach((el, index) => {
        el.num = new Date().getTime() * 1000 + index
      })
      let tempItem = JSON.parse(JSON.stringify(item))
      this.rConfig.push(tempItem)
      obj.element = item
      obj.list = this.mConfig
      if (type) {
        this.activeIndex = index - 1
      } else {
        this.activeIndex = index + 1
      }
      this.$store.commit('mobildConfig/SETCONFIGNAME', item.name)
      this.$store.commit('mobildConfig/defaultArraySort', obj)
    },
    // 组件添加
    addDomCon(item, type, index) {
      if (item.name == 'search_box') {
        if (this.isSearch) return this.$message.error('该组件只能添加一次')
        this.isSearch = true
      }
      if (item.name == 'nav_bar') {
        if (this.isTab) return this.$message.error('该组件只能添加一次')
        this.isTab = true
      }
      idGlobal += 1
      let obj = {}
      let timestamp = new Date().getTime() * 1000
      item.num = `${timestamp}`
      item.id = `id${timestamp}`
      this.activeConfigName = item.name
      let tempItem = JSON.parse(JSON.stringify(item))
      if (item.name == 'search_box') {
        this.rConfig = []
        this.mConfig.unshift(tempItem)
        this.activeIndex = 0
        this.rConfig.push(tempItem)
      } else if (item.name == 'nav_bar') {  // 动态拖动可上传此部分代码
        this.rConfig = []
        if (this.mConfig[0] && this.mConfig[0].name === 'search_box') {
          this.mConfig.splice(1, 0, tempItem)
          this.activeIndex = 1
        } else {
          this.mConfig.splice(0, 0, tempItem)
          this.activeIndex = 0
        }
        this.rConfig.push(tempItem)
      } else {
        if (type) {
          this.rConfig = []
          this.mConfig.push(tempItem)
          this.activeIndex = this.mConfig.length - 1
          this.rConfig.push(tempItem)
        } else {
          this.mConfig.splice(index + 1, 0, tempItem)
          this.activeIndex = index
        }
      }
      this.mConfig.forEach((el, index) => {
        el.num = new Date().getTime() * 1000 + index
      })
      // 保存组件名称
      obj.element = item
      obj.list = this.mConfig
      this.$store.commit('mobildConfig/SETCONFIGNAME', item.name)
      this.$store.commit('mobildConfig/defaultArraySort', obj)
    },
    //中间页点击添加模块；
    bindAddDom(item, type, index) {
      let i = item
      this.lConfig.forEach(j => {
        if (item.name == j.name) {
          i = j
        }
      })
      this.addDomCon(i, type, index)
    },
    //左边配置模块点击添加；
    addDom(item, type) {
      this.addDomCon(item, type)
    },
    // 点击显示相应的配置
    bindconfig(item, index) {
      this.rConfig = []
      let tempItem = JSON.parse(JSON.stringify(item))
      this.rConfig.push(tempItem)
      this.activeIndex = index
      this.$store.commit('mobildConfig/SETCONFIGNAME', item.name)
    },
    // 组件删除
    bindDelete(item, key) {
      if (item.name == 'search_box') {
        this.isSearch = false
      }
      if (item.name == 'nav_bar') {
        this.isTab = false
      }
      this.mConfig.splice(key, 1)
      this.rConfig.splice(0, 1)
      if (this.mConfig.length != key) {
        this.rConfig.push(this.mConfig[key])
      } else {
        if (this.mConfig.length) {
          this.activeIndex = key - 1
          this.rConfig.push(this.mConfig[key - 1])
        } else {
          this.showTitle()
        }
      }
      // 删除第几个配置
      this.$store.commit('mobildConfig/DELETEARRAY', item)
    },
    // 组件返回
    config(data) {
      let propsObj = this.propsObj
      propsObj.data = data
      propsObj.name = this.activeConfigName
    },
    addSort(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    // 数组排序
    arraySort() {
      let tempArr = []
      let basis = {
        title: '基础组件',
        list: [],
        isOpen: true
      }
      let marketing = {
        title: '营销组件',
        list: [],
        isOpen: true
      }
      let tool = {
        title: '工具组件',
        list: [],
        isOpen: true
      }
      let user = {
        title: '用户组件',
        list: [],
        isOpen: true
      }
      this.lConfig.map((el, index) => {
        if (el.type == 0) {
          basis.list.push(el)
        }
        if (el.type == 1) {
          marketing.list.push(el)
        }
        if (el.type == 2) {
          tool.list.push(el)
        }
        if (el.type == 3) {
          user.list.push(el)
        }
      })
      tempArr.push(user, basis, marketing, tool)
      this.leftMenu = tempArr
    },
    diySaveDate(val) {
      diySave(this.pageId, {
        type: this.pageType,
        value: val,
        title: this.titleTxt,
        name: this.nameTxt,
        is_show: this.showTxt ? 1 : 0,
        is_bg_color: this.colorTxt ? 1 : 0,
        color_picker: this.colorPickerTxt,
        bg_pic: this.picUrlTxt,
        bg_tab_val: this.tabValTxt,
        is_bg_pic: this.picTxt ? 1 : 0,
        type: 6,
      }).then((res) => {
        this.loading = false
        this.pageId = res.data.id
        this.$message.success(res.message)
      }).catch((res) => {
        this.loading = false
        this.$message.error(res.message)
      })
    },
    // 保存配置
    saveConfig() {
      if (this.mConfig.length == 0) {
        return this.$message.error('暂未添加任何组件，保存失败！')
      }
      this.loading = true
      let val = this.$store.state.mobildConfig.defaultArray
      if (!this.footActive) {
        let timestamp = new Date().getTime() * 1000
        val[timestamp] = this.$store.state.mobildConfig.pageFooter
        this.footActive = true
      }
      this.$nextTick(function () {
        this.diySaveDate(val)
      })
    },
    // 获取默认配置
    getDefaultConfig() {
      diyGetInfo(this.pageId).then(({ data }) => {
        let obj = {}
        let tempARR = []
        this.$store.commit('mobildConfig/titleUpdata', data.info.title)
        this.$store.commit('mobildConfig/nameUpdata', data.info.name)
        this.$store.commit('mobildConfig/showUpdata', data.info.is_show)
        this.$store.commit('mobildConfig/colorUpdata', data.info.is_bg_color || 0)
        this.$store.commit('mobildConfig/picUpdata', data.info.is_bg_pic || 0)
        this.$store.commit('mobildConfig/pickerUpdata', data.info.color_picker || '#f5f5f5')
        this.$store.commit('mobildConfig/radioUpdata', data.info.bg_tab_val || 0)
        this.$store.commit('mobildConfig/picurlUpdata', data.info.bg_pic || '')
        let newArr = this.objToArr(data.info.value)
        console.log(newArr,'newArr');
        console.log(this.lConfig,'this.lConfig');
        function sortNumber(a, b) {
          return a.timestamp - b.timestamp
        }

        newArr.sort(sortNumber)
        newArr.map((el, index) => {
          if (el.name == 'headerSerch') {
            this.isSearch = true
          }
          if (el.name == 'tabNav') {
            this.isTab = true
          }
          if (el.name == 'goodList') {
            let storage = window.localStorage
            storage.setItem(el.timestamp, el.selectConfig.activeValue)
          }
          el.id = 'id' + el.timestamp
          
          this.lConfig.map((item, j) => {
            if (el.name == item.defaultName) {
              item.num = el.timestamp
              item.id = 'id' + el.timestamp
              let tempItem = JSON.parse(JSON.stringify(item))
              tempARR.push(tempItem)
              obj[el.timestamp] = el
              this.mConfig.push(tempItem)
              // 保存默认组件配置
              this.$store.commit('mobildConfig/ADDARRAY', {
                num: el.timestamp,
                val: el
              })
            }
          })
        })
        let objs = newArr[newArr.length - 1]
        if (objs.name == 'pageFoot') {
          this.$store.commit('mobildConfig/footPageUpdata', objs)
        }
        this.showTitle()
      })
    },

    // 重置
    reast() {
      if (this.pageId == 0) {
        this.$message.error('新增页面，无法重置')
      } else {
        this.$modalSure('是否重置当前页面数据?').then(() => {
          this.mConfig = []
          this.rConfig = []
          this.activeIndex = -99
          this.getDefaultConfig()
        })
      }
    }
  },
  beforeDestroy() {
    this.$store.commit('mobildConfig/titleUpdata', '')
    this.$store.commit('mobildConfig/nameUpdata', '')
    this.$store.commit('mobildConfig/showUpdata', 1)
    this.$store.commit('mobildConfig/colorUpdata', 0)
    this.$store.commit('mobildConfig/picUpdata', 0)
    this.$store.commit('mobildConfig/pickerUpdata', '#f5f5f5')
    this.$store.commit('mobildConfig/radioUpdata', 0)
    this.$store.commit('mobildConfig/picurlUpdata', '')
    this.$store.commit('mobildConfig/SETEMPTY')
  },
  destroyed() {
    this.$store.commit('mobildConfig/titleUpdata', '')
    this.$store.commit('mobildConfig/nameUpdata', '')
    this.$store.commit('mobildConfig/showUpdata', 1)
    this.$store.commit('mobildConfig/colorUpdata', 0)
    this.$store.commit('mobildConfig/picUpdata', 0)
    this.$store.commit('mobildConfig/pickerUpdata', '#f5f5f5')
    this.$store.commit('mobildConfig/radioUpdata', 0)
    this.$store.commit('mobildConfig/picurlUpdata', '')
    this.$store.commit('mobildConfig/SETEMPTY')
  }
}
</script>

<style scoped lang="scss">
.product_tabs {
  padding: 16px 32px;
  background: #fff;
  border-bottom: 1px solid #e8eaec;
  text-align: right;
}

.ysize {
  background-size: 100%;
}

.fullsize {
  background-size: 100% 100%;
}

.repeat {
  background-repeat: repeat;
}

.noRepeat {
  background-repeat: no-repeat;
}

/deep/ .el-input__inner {
  font-size: 13px;
}

.defaultData {
  cursor: pointer;
  position: absolute;
  left: 50%;
  margin-left: 245px;

  .data {
    margin-top: 20px;
    color: #282828;
    background-color: #fff;
    width: 94px;
    text-align: center;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    font-size: 12px;
  }

  .data:hover {
    background-color: #2d8cf0;
    color: #fff;
    border: 0;
  }
}

.overflowy {
  overflow-y: scroll;

  .picture {
    width: 379px;
    height: 20px;
    margin: 0 auto;
    background-color: #fff;
  }
}

.bnt {
  width: 80px !important;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px #fff;
  display: none;
}

.left:hover::-webkit-scrollbar-thumb,
.right-box:hover::-webkit-scrollbar-thumb {
  display: block;
}

.contxt:hover ::-webkit-scrollbar-thumb {
  display: block;
}

::-webkit-scrollbar {
  width: 4px !important;
  /*对垂直流动条有效*/
}

.store-home {
  width: 379px;
  margin: 0 auto;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 100%), url('../../../assets/images/mer_banner.jpg');
  display: flex;
  flex-direction: column;
  background-position: left top/750px 200px no-repeat fixed;
  overflow: hidden;
}

.header {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  padding-right: 17px;
  height: 43px;
  padding-left: 16px;

  .head-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 27px;
    width: 70px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 13px;

    .icon-xiangzuo {
      font-size: 16px;
      color: #FFFFFF;
    }

    .iconfont-h5 {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      text-align: center;
      color: #fff;
      box-sizing: border-box;

      &.icon-xiangzuo {
        border-right: 1px solid rgba(255, 255, 255, .3);
      }
    }
  }

  .search {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 30px;
    border-radius: 15px;
    margin-left: 16px;
    background-color: #FFFFFF;
    font-weight: 500;
    font-size: 13px;
    color: #999999;

    .iconfont-h5 {
      margin-right: 6px;
      margin-left: 15px;
      font-size: 12px;
    }
  }
}

.store {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 11px;

  image {
    width: 37px;
    height: 37px;
    border-radius: 3px;
  }

  .kefu {
    color: #ffffff;
    margin-right: 13px;
    cursor: pointer;

    .icon-kefu3 {
      font-size: 17px;
    }
  }

  .text {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
    margin-left: 10px;

    div {
      display: inline-flex;
      align-items: center;
      max-width: 100%;

      .name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
        font-size: 15px;
        line-height: 1;
        color: #FFFFFF;
      }

      .iconfont-h5 {
        margin-left: 5px;
        font-size: 8px;
        color: #FFFFFF;
      }
    }

    .score {
      display: flex;
      align-items: center;
      margin-top: 10px;
      font-weight: 500;
      font-size: 12px;
      line-height: 1;
      color: #FFFFFF;

      .star {
        position: relative;
        width: 56px;
        height: 10px;
        margin-right: 5px;
        background: url(../../../assets/images/star_active.png) left top/100% 100% no-repeat;
        overflow: hidden;

        span {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 24px;
    border-radius: 12px;
    background-color: #E93323;
    font-weight: 500;
    font-size: 11px;
    color: #FFFFFF;

    .iconfont {
      margin-right: 6 rpx;
      font-size: 22 rpx;
    }

    &.gary {
      background-color: #999;
    }
  }
}

.font-bg-red {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 2px;
  padding: 0 2px;
  line-height: 15px;
  margin-right: 4px;
  background-color: #E93323;
  border: 1px solid #E93323;
}

.nav {
  position: relative;

  .nav-cont {
    display: flex;
    align-items: center;
    height: 42px;

    .item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 0;

      .cont {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 58px;
        height: 22px;
        border-radius: 11px;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;

        .arrow-icon {
          margin-left: 5px;
          font-size: 9px;
        }

        .layout-icon {
          font-size: 16px;
        }

        .icon-pailie {
          font-size: 16px;
        }

        image {
          width: 8px;
          height: 10px;
          margin-left: 3px;
        }
      }
    }

    .active {
      .cont {
        background-color: #FFFFFF;
        font-weight: bold;
        color: #E93323;
      }
    }
  }
}

.footer {
  display: flex;
  width: 379px;
  margin: 0 auto;
  height: 50px;
  background-color: #FFFFFF;
  opacity: 0.96;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 10px;
    color: #282828;

    .iconfont-h5 {
      font-size: 22px;
    }

    .icon-zhuanti {
      font-size: 18px;
    }
  }

  .active {
    color: #E93323;
  }
}

.scrollCon {
  overflow-y: scroll;
  overflow-x: hidden;
}

.scroll-box .position {
  display: block !important;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px dashed #1890ff;
  color: #1890ff;
  background-color: #edf4fb;
}

.scroll-box .conter {
  display: none !important;
}

.dragClass {
  background-color: #fff;
}

.ivu-mt {
  display: flex;
  justify-content: space-between;
}

.iconfont-diy {
  font-size: 24px;
  color: #1890ff;
}

.diy-wrapper {
  max-width: 100%;
  min-width: 1100px;
  display: flex;
  justify-content: space-between;

  .left {
    min-width: 300px;
    max-width: 300px;
    border-radius: 4px;
    height: 100%;

    .title-bar {
      display: flex;
      color: #333;
      border-bottom: 1px solid #eee;
      border-radius: 4px;
      cursor: pointer;

      .title-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 45px;

        &.on {
          color: #1890FF;
          font-size: 14px;
          border-bottom: 1px solid #1890FF;
        }
      }
    }

    .wrapper {
      padding: 15px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;

      .tips {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
        font-size: 13px;
        color: #000;
        cursor: pointer;

        .ivu-icon {
          color: #000;
        }
      }
    }

    .link-item {
      padding: 10px;
      border-bottom: 1px solid #F5F5F5;
      font-size: 12px;
      color: #323232;

      .name {
        font-size: 14px;
        color: #1890FF;
      }

      .link-txt {
        margin-top: 2px;
        word-break: break-all;
      }

      .params {
        margin-top: 5px;
        color: #1CBE6B;
        word-break: break-all;

        .txt {
          color: #323232;
        }

        span {
          &:last-child i {
            display: none;
            color: red;
          }
        }
      }

      .lable {
        display: flex;
        margin-top: 5px;
        color: #999;
        align-items: center;

        p {
          flex: 1;
          word-break: break-all;
        }

        button {
          margin-left: 30px;
        }
      }
    }

    .dragArea.list-group {
      display: flex;
      flex-wrap: wrap;

      .list-group-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 74px;
        height: 66px;
        margin-right: 17px;
        margin-bottom: 10px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;

        &:hover {
          box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
          border-right: 5px;
        }

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }

  .content {
    position: relative;
    height: 100%;
    width: 100%;

    .page-foot {
      position: relative;
      width: 379px;
      margin: 0 auto 20px auto;

      .delete-box {
        display: none;
        position: absolute;
        left: -2px;
        top: 0;
        width: 383px;
        height: 100%;
        border: 2px dashed #1890ff;
        padding: 10px 0;
      }

      &:hover,
      &.on {
        /*cursor: move;*/

        .delete-box {
          /*display: block;*/
        }
      }

      &.on {
        cursor: move;

        .delete-box {
          display: block;
          border: 2px solid #1890ff;
          box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
        }
      }


    }

    .page-title {
      position: relative;
      height: 35px;
      line-height: 35px;
      background: #fff;
      font-size: 15px;
      color: #333333;
      text-align: center;
      width: 379px;
      margin: 0 auto;

      .delete-box {
        display: none;
        position: absolute;
        left: -2px;
        top: 0;
        width: 383px;
        height: 100%;
        border: 2px dashed #1890ff;
        padding: 10px 0;

        span {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 32px;
          height: 16px;
          line-height: 16px;
          display: inline-block;
          text-align: center;
          font-size: 10px;
          color: #fff;
          background: rgba(0, 0, 0, 0.4);
          margin-left: 2px;
          cursor: pointer;
          z-index: 11;
        }
      }

      &:hover,
      &.on {
        /*cursor: move;*/

        .delete-box {
          /*display: block;*/
        }
      }

      &.on {
        cursor: move;

        .delete-box {
          display: block;
          border: 2px solid #1890ff;
          box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
        }
      }

    }

    .scroll-box {
      flex: 1;
      background-color: #fff;
      width: 379px;
      margin: 0 auto;
      padding-top: 1px;
    }

    .dragArea.list-group {
      width: 100%;
      height: 100%;

      .mConfig-item {
        position: relative;
        cursor: move;

        .delete-box {
          display: none;
          position: absolute;
          left: -2px;
          top: 0;
          width: 383px;
          height: 100%;
          border: 2px dashed #1890ff;
          /*padding: 10px 0;*/

          .handleType {
            position: absolute;
            right: -43px;
            top: 0;
            width: 36px;
            height: 143px;
            border-radius: 4px;
            background-color: #1890ff;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding: 4px 0;

            .iconfont {
              padding: 5px 0;

              &.on {
                opacity: 0.4;
              }
            }
          }
        }

        &.on {
          cursor: move;

          .delete-box {
            display: block;
            border: 2px solid #1890ff;
            box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
          }
        }

      }
    }
  }

  .right-box {
    max-width: 400px;
    min-width: 400px;
    height: 100%;
    border-radius: 4px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;

    .title-bar {
      width: 100%;
      height: 45px;
      line-height: 45px;
      padding-left: 24px;
      color: #000;
      border-radius: 4px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
    }
  }

  ::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #bfc1c4;
  }
}

.foot-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: #fff;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.03);

  button {
    width: 100px;
    height: 32px;
    font-size: 13px;

    &:first-child {
      margin-right: 20px;
    }
  }
}

/deep/ .ivu-scroll-loader {
  display: none;
}

/deep/ .el-card {
  bordr: none;
  box-shadow: none;
}

/deep/ .el-card__body {
  padding: 0;
}
</style>
